<template>
  <view>
    <!-- search.vue -->
    <view class="search-box">
      <!-- 使用 uni-ui 提供的搜索组件 -->
      <uni-search-bar @input="input" :radius="18" cancelButton="none" :focus="true"></uni-search-bar>

      <!-- 搜索建议 -->
      <view class="sugg-list" v-if="searchResults.length !== 0">
        <view class="sugg-item" v-for="(item,i) in searchResults" :key="i">
          <!-- 左边：商品名称 -->
          <view class="goods_name" @click="gotoGoodsDetail(item)">
            {{item.goods_name}}
          </view>
          <!-- 右边：箭头 -->
          <uni-icons type="arrowright" size="16"></uni-icons>
        </view>
      </view>
      <!-- 搜索历史 -->
      <view class="history-box" v-else>
        <!-- 标题区 -->
        <view class="history-title">
          <text>搜索历史</text>
          <uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons>
        </view>
        <!-- 列表区 -->
      <view class="history-list">
        <uni-tag :inverted="true"  :text="item" v-for="(item, i) in historys" :key="i" @click="gotoGoodsList(item)"></uni-tag>
      </view>  
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 定义定时任务对象
        timer: null,
        // 每次查询的文本
        kw: '',
        // 搜索结果列表
        searchResults: [],
        // 搜索关键词的历史记录
        historyList: ['a', 'app', 'apple']
      };
    },
    // 窗体启动时加载历史列表
    onLoad() {
      this.historyList = JSON.parse(uni.getStorageSync("kw")||"[]")
    },
    // 定义计算属性:
    computed:{
      historys(){   // 这里定义一个属性名为:historys
        return [...this.historyList].reverse()
      }
    },
    methods: {
      // 当在文本框输入内容时触发此事件
      input(e) { // e：代表输入的文本框的内容

        // 下面的是防斗处理
        // 1. 清空定时任务
        clearTimeout(this.timer)
        // 2. 每隔500ms定时执行任务
        this.timer = setTimeout(() => {
          this.kw = e.value.trim()
          // 查询结果
          this.getSearchResults()
        }, 500)
      },
      // 根据关键字查询商品
      async getSearchResults() {
        if (this.kw === '') {
          this.searchResults = []
          return
        }
        const {
          data: res
        } = await uni.$http.get("/api/public/v1/goods/qsearch?query=" + this.kw)
        if (res.meta.status !== 200) return uni.$showMsg()
        this.searchResults = res.message
        
        // 保存历史列表
        this.saveHistoryList()
      },
      gotoGoodsDetail(item) {
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
        })
      },
      // 保存历史列表
      saveHistoryList(){
        this.historyList.push(this.kw)
        // 将原来的historyList去重,并重新设置值（有问题）
        // this.historyList = [...new Set([this.kw,...this.historyList])]
          // 1. 将 Array 数组转化为 Set 对象
          const set = new Set(this.historyList)
          // 2. 调用 Set 对象的 delete 方法，移除对应的元素
          set.delete(this.kw)
          // 3. 调用 Set 对象的 add 方法，向 Set 中添加元素
          set.add(this.kw)
          // 4. 将 Set 对象转化为 Array 数组
          this.historyList = Array.from(set)
          // 5. 将历史列表持久化保存
          uni.setStorageSync("kw",JSON.stringify(this.historyList))
      },
      cleanHistory(){
        this.historyList = []
        this.setStorageSync("kw","[]")
      },
      gotoGoodsList(item){
        uni.navigateTo({
          url:'/subpkg/goods_list/goods_list?query=' + item
        })
      }
    }
  }
</script>

<style lang="scss">
  .uni-searchbar {
    display: flex;
    flex-direction: row;
    position: relative;
    padding: 8px;
    background-color: #c00000 !important
  }

  .search-box {
    position: sticky;
    top: 0;
    z-index: 999;

    .sugg-list {
      .sugg-item {
        display: flex;
        justify-content: space-between;
        padding: 6px 5px;

        .goods_name {
          font-size: 12px;
          // 文字不允许换行（单行文本）
          white-space: nowrap;
          // 溢出部分隐藏
          overflow: hidden;
          // 文本溢出后，使用 ... 代替
          text-overflow: ellipsis;
          margin-right: 3px;
        }
      }

    }
  }
  .history-box{
    .history-title{
      display: flex;
      justify-content: space-between;
      margin: 10px;
    }
    .history-list{
        display: flex;
        .uni-tag{
          margin-left: 5px;
        }
        
    }
  }
</style>